<template>
	<section class="information-detail">
		<scroller lock-x>
			<div>
				<div class="loadingBg" v-if="showLoading">
					<div class="loading">
						<img src="../assets/image/loading.gif" />
					</div>
				</div>
				<div v-else-if="code==0">
					<div class="information-cont">
							<h3>{{informationCont.title}}</h3>
							<div class="smallLine">
									<span class="time">{{intime}}</span>
									<span class="watch">{{informationCont.viewCount}}</span>
							</div>
							<div class="artical-cont" v-html="informationCont.content"></div>
							<div class="like-info" @click="downLoad">
									<i :class="[liked ? 'liked':'unLiked']" ></i>
									<span :class="[liked ? 'choosed':'noChoosed']">{{informationCont.likeCount||0}}</span>
							</div>
							
							<div class="lineLabels">
									<ul>
											<li v-for="item in informationCont.labels" :key="item.id" @click="downLoad">{{item.name}}</li>
									</ul>
							</div>
					</div>
					<div v-if='informationCont.adMaterials.length' class="adContainer">
						<div v-for="(ad,index) in informationCont.adMaterials" :key='"ad"+index' class="advertising" @click='advertisingGo(ad.hrefUrl)'>
							<img :src="ad.adIconUrl" :alt="ad.adName">
							<i>广告</i>
						</div>
					</div>
					<div class="information-releat"  v-if='informationCont.relatedReads&&informationCont.relatedReads.length>0'>
						<div class="releat-list">
							<div class="releat-title">相关新闻</div>
							<ul>
								<li 
									v-for='(read,index) in informationCont.relatedReads' 
									:key='"read"+index' 
									:id='read.id'
									@click="downLoad"
									>
									<div class="pertinentThumbnail">
										<img v-if="read.cover" :src="read.cover" alt="">
										<img v-else src="../../static/hello.png" alt="掌门好老师">
									</div>
									<div class="pertinentSynopsis">
										<p class="mainContent">{{read.title | titleNum}}</p>
										<div class="subContent">
											<div class="tag-list">
												<span class="topicTag" v-if="read.labelNames">{{read.labelNames||''}}</span>
											</div>
											<!-- <span class="watch">{{read.viewCount||0}}</span> -->
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="hotResponse" v-show="false">
						<div class="resTitle">
							<div class="left">热门评论</div>
							<div class="right" @click="downLoad">写评论</div>
						</div>
						<ul class="responseList">
							<li class="resItem">
								<div class="middle_img"><img src="../assets/image/common/default-icon-fox.jpg" ></div>
								<div class="content">
									<div class="content_title">
										<div class="title_1">
											<div class="header">
												<div class='name'>孙平家长</div>
												<!-- <div :class="['right', commitLiked ? 'isLiked' : '']" @click="handleChangeCommitLiked"> -->
												<div :class="['right', commitLiked ? 'isLiked' : '']" @click="downLoad">
													<img src="../assets/image/com_icon_favour_40_s.png" alt="" v-if="commitLiked">
													<img src="../assets/image/com_icon_favour_40_n.png" alt="" v-else>
													<span class="third">121</span>
												</div>
											</div>
											<!-- <p>{{ item.createtime ? (new Date(item.createtime)).format('yyyy-MM-dd hh:mm')  : '' }}</p> -->
											<p>2019-02-15 07:54</p>
										</div>
									</div>
									<div class="suggestion">AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。</div>
								</div>
							</li>
						</ul>
					</div>
					
				</div>
				<div class="noCont" v-else>
					<img src="../assets/image/no_content.png">
					<span>资讯不存在</span>
				</div>

				<div style="width: 7.5rem; height: 2rem;"></div>

			</div>
		</scroller>
		<downLoad :hasShare="hasShare"></downLoad>

	</section>
</template>

<script>
import api from "../api";
import {toast} from "../toast";
import downLoad from "./../components/common/download/downLoad.vue";
export default {
	components: {
		downLoad,
	},
	data(){
		return{
			informationCont:{
				adMaterials: [],
			},
			liked: false,
			prevent:true,
			intime:"",
			hasShare: true,
			// hasShare: false,
			appId: "wx921f8ebbe6ced2c2",
			wxSharePic:"https://static.shengxue985.com/oss/20180830/e5089c21aa9249e0bd121f7a7e21b582.png",
			showLoading: true,
			code:0,
			commitLiked: false,
		}
	},
	filters:{
		titleNum: function(title){
				if(title.length>33){
						return title=title.slice(0,33)+'...'
				}else{
						return title
				}
		}
	},
	created() {
		this.getReportResult();
		// this.secondShare(true, {
		// 	url: window.location.href,
		// 	appId: this.appId // 必填，公众号的唯一标识
		// });
	},
	mounted() {
		
	},
	methods: {
		handleChangeCommitLiked() {
			this.commitLiked = !this.commitLiked;
		},
		getReportResult() {
			const params = {
				mobile: "",
				tid: this.$route.query.tid
			};
			this.showLoading=true;
			this.informationCont={
					adMaterials:[]
			};
			api.getbbsHeadlines(params).then(res => {
				this.code=res.data.code;
				if (res.data.code == 0) {
					this.showLoading=false;
					this.informationCont = res.data.data;
					console.log('information', this.informationCont)
					this.liked = !!res.data.data.liked;
					let intimeString = new Date(res.data.data.inTime);
					const year = intimeString.getFullYear();
					let month = intimeString.getMonth() + 1;
					month = month > 9 ? month : "0" + month;
					const day =
						intimeString.getDate() > 9
							? intimeString.getDate()
							: "0" + intimeString.getDate();
					const hh =
						intimeString.getHours() > 9
							? intimeString.getHours()
							: "0" + intimeString.getHours();
					const mm =
						intimeString.getMinutes() > 9
							? intimeString.getMinutes()
							: "0" + intimeString.getMinutes();
											this.intime = year + "-" + month + "-" + day + " " + hh + ":" + mm;

					// 调用二次分享
					this.secondShare(true, {
						url: window.location.href,
						appId: this.appId // 必填，公众号的唯一标识
					}, this.informationCont);
				} else {
					this.showLoading=false;
					toast(res.data.message)
				}
			}).catch(err => {
				this.showLoading=false;
				toast(err);
			});
		},

		//跳转下载页面
		downLoad() {
            window.location = "http://a.app.qq.com/o/simple.jsp?pkgname=com.sx985.am";
		},
       	//二次分享
		secondShare(hasData, params, sendObj) {
			api
				.getSecondShareKey(params)
				.then(res => {
					if (res.data.code == 0) {
						let data = res.data.data;
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: data.appId, // 必填，公众号的唯一标识
							timestamp: data.timestamp, // 必填，生成签名的时间戳
							nonceStr: data.nonceStr, // 必填，生成签名的随机串
							signature: data.signature, // 必填，签名，见附录1
							jsApiList: [
								"chooseImage",
								"previewImage",
								"uploadImage",
								"downloadImage",
								"checkJsApi",
								"updateTimelineShareData", // 分享到朋友圈
								"updateAppMessageShareData", // 分享给朋友
								// "onMenuShareQQ",
								"onMenuShareWeibo"
							] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
						this.wxShare(hasData, {
							// title: this.informationCont.title || "邀您查看话题详情", // 分享标题
							// desc: this.informationCont.content || "升学在线,学习超给力", // 分享描述
							title: sendObj.title || "邀您查看话题详情", // 分享标题
							desc: sendObj.description || "升学在线,学习超给力", // 分享描述
							link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							// imgUrl: this.wxSharePic, // 分享图标
							imgUrl: sendObj.cover, // 分享图标
							type: "", // 分享类型,music、video或link，不填默认为link
							dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
							success: function() {
								// 用户确认分享后执行的回调函数
							},
							cancel: function() {
								// 用户取消分享后执行的回调函数
							}
						});
					} else {
					}
				})
				.catch(err => {
				});
		},
		wxShare(hasData, config) {
			let c;
			if (!hasData) {
				c = {};
				c.title = "邀您查看话题详情";
				c.desc = "升学在线,学习超给力";
				(c.link = window.location.href), (c.imgUrl = this.wxSharePic);
			} else {
				c = config;
			}
			if (location.hash == "#debug") {
				toast(JSON.stringify(c));
			}
			wx.ready(function() {
				wx.updateAppMessageShareData(c);
				wx.updateTimelineShareData(c);
				// wx.onMenuShareQQ(c);
				wx.onMenuShareWeibo(c);
			});
		}, 
        //跳转广告页面
		advertisingGo(adUrl) {
			window.location = adUrl;
		} 
	}
}
</script>

<style lang="scss">
@import "../styles/mixin.scss";
.information-detail{
	width: px2rem(720);
	margin: 0 auto;
	background: #f4f5f7;
	overflow: hidden;
	.watch {
		background: url('../assets/image/parentHeadline/newWatch.png') no-repeat center left;
		background-size: px2rem(32) px2rem(32);
	}
	.information-cont{
		padding: 0 px2rem(30);
		background: #fff;
		white-space:normal; 
		word-break:break-all;
		h3 {
			font-size: px2rem(40);
			line-height: px2rem(64);
			color: #333333;
			font-weight: bold;
			padding-top: px2rem(30)
		}
		.artical-cont{
			padding-top: px2rem(32);
			font-size: px2rem(30);
			overflow: hidden;
			img{
				width: 100%;
			}
		}
		.like-info {
			width: px2rem(176);
			height: px2rem(72);
			margin: 0 auto;
			text-align: center;
			// border: px2rem(2) solid #cccccc;
			box-shadow:0px 2px 10px 0px rgba(153,153,153,0.2);
			border-radius: px2rem(40);
			margin-top: px2rem(50);
			i {
				display: inline-block;
				width: px2rem(32);
				height: px2rem(32);
				margin-right: px2rem(8);
				margin-top: px2rem(22);
				vertical-align: top;
			}
			.liked {
				background: url('../assets/image/com_icon_favour_32_s.png') center center no-repeat;
				background-size: 100%;
			}
			.unLiked {
				background: url('../assets/image/com_icon_favour_40_n.png') center center no-repeat;
				background-size: 100%;
			}
			span {
				line-height: px2rem(76);
				font-size: px2rem(28);
				color: #FFAD0D;
			}
			.choosed {
				color: #FFAD0D;
			}
			.noChoosed {
				color: #C7C7C7;
			}
		}
		.smallLine{
			display: flex;
			display: -webkit-flex;
			justify-content:space-between;
			-webkit-justify-content: space-between;
			align-items: center;
			-webkit-align-items: center;
			font-size: px2rem(26);
			color: #BBB;
			padding-top: px2rem(40);
			padding-bottom: px2rem(34);
			border-bottom: 1px solid #E5E8ED;
			.watch {
				padding: 0 0 0 px2rem(40);
				font-size: px2rem(24);
				color: #C7C7C7;
			}
		}
		.lineLabels{
			padding-top: px2rem(44);
			overflow: hidden;
			padding-bottom: px2rem(24);
			ul{
				li{
					float: left;
					margin: 0 px2rem(16) px2rem(16) 0;
					color: #999;
					font-size: px2rem(28);
					line-height: px2rem(40);
				}
				li:not(:last-child):after {
					content: '·';
					display: inline-block;
					margin-left: px2rem(16);
				}


			}
		}
	}
	.adContainer {
		width: px2rem(720);
		background: #fff;
		overflow: hidden;
	}
	.advertising {
		position: relative;
		background: #fff;
		margin: 0 px2rem(30) px2rem(40) px2rem(30);
		font-size: 0;
		height: px2rem(152);
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
		}
		img,
		i {
			display: inline-block;
		}
		i {
			position: absolute;
			top: 0;
			right: 0;
			width: px2rem(62);
			height: px2rem(26);
			opacity: 0.5;
			background: #000000;
			font-size: px2rem(21);
			color: #ffffff;
			text-align: center;
			line-height: px2rem(26);
			font-style: normal;
		}
	}
	.information-releat{
		// margin-top: px2rem(20);
		.releat-list{
			background: #F7F7FA;
			padding: px2rem(48) px2rem(32);
			.releat-title{
				font-size: px2rem(30);
				padding-bottom: px2rem(12);
				color: #666666;
			}
			li{
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				flex-wrap: nowrap;
				-webkit-flex-wrap: nowrap;
				justify-content: space-between;
				-webkit-justify-content: space-between;
				align-items: stretch;
				-webkit-align-items: stretch;
				padding-top: px2rem(40);
				.pertinentThumbnail {
					width: px2rem(224);
					height: px2rem(144);
					// margin-bottom: px2rem(26);
					border-radius: px2rem(6);
					overflow: hidden;
					box-sizing: border-box;
					img {
						width: 100%;
					}
				}
				.pertinentSynopsis {
					display: flex;
					display: -webkit-flex;
					flex-direction: column;
					flex-wrap: nowrap;
					-webkit-flex-wrap: nowrap;
					justify-content: space-between;
					-webkit-justify-content: space-between;
					align-items: center;
					-webkit-align-items: center;
					// padding-bottom: px2rem(26);
					// border-bottom: 1px solid #eee;
					.mainContent {
						width: px2rem(414);
						font-size: px2rem(24);
						line-height: px2rem(34);
						font-weight: bold;
						color: #222;
						word-break: break-all;
						white-space: pre-wrap;
					}
					.subContent {
						display: flex;
						display: -webkit-flex;
						flex-direction: row;
						flex-wrap: nowrap;
						-webkit-flex-wrap: nowrap;
						justify-content: space-between;
						-webkit-justify-content: space-between;
						align-items: center;
						-webkit-align-items: center;
						width: px2rem(414);
						.tag-list{
							width: 75%;
							float: left;
							.topicTag {
								font-size: px2rem(18);
								line-height: px2rem(34);
								color: #bbb;
								float: left;
								// border: 1px solid #f4f5f7;
								border-radius: px2rem(6);
								// padding: px2rem(2) px2rem(8);
								// margin: 0 px2rem(8) px2rem(8) 0;
							}
						}
						.watch {
							padding: 0 0 0 px2rem(36);
							font-size: px2rem(24);
							line-height: px2rem(34);
							color: #ccc;
						}
					}
				}
					
			}
		}
	}

	.hotResponse {
		padding: px2rem(56) px2rem(32) px2rem(175);
		background: #fff;

		.resTitle {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				color: #222;
				font-size: px2rem(36);
				font-weight: bold;
				line-height: px2rem(40);
			}

			.right {
				color: #FFAD0D;
				font-size: px2rem(28);
				font-weight: bold;
				line-height: px2rem(40);
			}

		}

		.responseList {
			list-style: none;
			padding-left: 0;

			.resItem {
				padding: px2rem(46) 0 px2rem(32);
				border-bottom: 1px solid #E5E8ED;
				display: flex;
				justify-content: space-between;

				.middle_img {
					text-align: center;
					img {
						width: px2rem(80);
						height: px2rem(80);
						border-radius: 50%;
					}
				}
				.content {
					width: 85%;
					.content_title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 0.25rem;
						margin-bottom: px2rem(25);
						.title_1 {
							font-size: px2rem(32);
							width: 100%;
							.header {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.name {
									font-size: px2rem(30);
									color: #222;
									font-weight: bold;
								}

								.right {
									display: flex;
									justify-content: flex-start;
									align-items: center;
									img {
										width: px2rem(40);
										height: px2rem(40);
									}
									.third {
										color: #C7C7C7;
										font-size: px2rem(26);
										margin-left: px2rem(4);
										line-height: px2rem(39);
									}
								}
								.isLiked {
									.third {
										color: #FFBD3E;
									}
								}
								
							}

							p {
								font-size: px2rem(24);
								color: #C7C7C7;
								margin-top: px2rem(6);
							}
						}

					}
					.suggestion {
						color: #999;
						margin-bottom: px2rem(15);
						font-size: px2rem(28);
					
					}
				}
			}

		}

	}

	.loadingBg{
		background: #fff;
		position: fixed;
		height: 100%;
		width: 100%;
		z-index: 999
	}
	.loading{
		width: px2rem(200);
		height: px2rem(200);
		display: block;
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 9999;
		margin-left: px2rem(-100);
		margin-top: px2rem(-30);
		background-size: 10% 10%;
		img{
			width: 100%
		}
	}
	.noCont{
		height: 300px;
		background: #fff;
		padding-top: px2rem(100);
		text-align: center;
		span{
			display: block;
			text-align: center;
			font-size: px2rem(30)
		}
		img{
			width: 50%;
		}
	}

	.mint-popup {
		width: 100%;
		height: 100%;

		.popupMain {
			padding: 0 px2rem(32);

			.backIcon {
				height: px2rem(88);
				margin-bottom: px2rem(16);

				img {
					width: px2rem(44);
					height: px2rem(44);
					margin-top: px2rem(22);
				}

			}

			.title {
				color: #222;
				font-size: px2rem(36);
				line-height: px2rem(40);
				font-weight: bold;
			}

			#commit {
				margin-top: px2rem(32);
				width: 100%;
				padding: px2rem(25) px2rem(24);
				height: px2rem(320);
				background: rgba(247,247,250,1);
				border-radius: px2rem(10);
				border: none;
				box-sizing: border-box;
				color: #222;
				font-size: px2rem(28);
				line-height: px2rem(36);
			}

			.btn {
				text-align: center;
				margin-top: px2rem(56);

				button {
					width: px2rem(320);
					height: px2rem(88);
					background: #FFAD0D;
					border: none;
					outline: none;
					border-radius: px2rem(44);
					color: #fff;
					font-size: px2rem(30);
					// font-weight: bold;
					letter-spacing: 1px;
				}

			}

		}

	}

}

textarea::-webkit-input-placeholder {
	color: #C7C7C7;
}

textarea::-moz-placeholder {
	color: #c7c7c7;
}

textarea::-moz-placeholder {
	color: #c7c7c7;
}

textarea:-ms-input-placeholder {
	color: #c7c7c7;
}

</style>
